<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1. 基础 webpack 配置 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/98.b4839344.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link router-link-active">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link router-link-active">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>9102 全员学 Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>深入理解 Vue 动画效果</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>Webpack 实现 Vue 多页应用</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html" class="active sidebar-link">1. 基础 webpack 配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#入口-entry" class="sidebar-link">入口(entry)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#出口-output" class="sidebar-link">出口(output)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#loader" class="sidebar-link">loader</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#插件-plugins" class="sidebar-link">插件(plugins)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#解析-resolve" class="sidebar-link">解析(resolve)</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#目录组织" class="sidebar-link">目录组织</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/vue/vue-multi-page/1-init-project.html#基本配置文件" class="sidebar-link">基本配置文件</a></li></ul></li><li><a href="/front-end-playground/vue/vue-multi-page/2-page-utils.html" class="sidebar-link">2. 拿取页面目录名</a></li><li><a href="/front-end-playground/vue/vue-multi-page/3-node-packages.html" class="sidebar-link">3. 打包相关 node 模块介绍</a></li><li><a href="/front-end-playground/vue/vue-multi-page/4-build.html" class="sidebar-link">4. 页面打包实现</a></li><li><a href="/front-end-playground/vue/vue-multi-page/5-dev-server.html" class="sidebar-link">5. 开发服务启动</a></li><li><a href="/front-end-playground/vue/vue-multi-page/6-hot-reload.html" class="sidebar-link">6. 热加载刷新</a></li><li><a href="/front-end-playground/vue/vue-multi-page/7-source-map-and-uglifyjs.html" class="sidebar-link">7. source map 和代码压缩</a></li><li><a href="/front-end-playground/vue/vue-multi-page/8-certain-loaders.html" class="sidebar-link">8. 静态资源 loader 们</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>项目中需要搭建一个多页面的环境，包括本地路由服务和分页面打包。本节作为首节内容，主要简单介绍一些 webpack 相关的常用配置。</p> <h1 id="webpack-基本概念"><a href="#webpack-基本概念" aria-hidden="true" class="header-anchor">#</a> Webpack 基本概念</h1> <p>更多的相关配置小伙伴们可以参考<a href="https://godbasin.github.io/2017/05/21/webpack-common-setting/" target="_blank" rel="noopener noreferrer">《正确的 Webpack 配置姿势，快速启动各式框架》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。
这里我们主要介绍搭建时涉及的一些配置。</p> <p><strong>四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。</strong></p> <h2 id="入口-entry"><a href="#入口-entry" aria-hidden="true" class="header-anchor">#</a> 入口(entry)</h2> <p>将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。
一般来说，在 Angular 中我们将是启动<code>.bootstrap()</code>的文件，在 Vue 中则是<code>new Vue()</code>的位置，在 React 中则是<code>ReactDOM.render()</code>或者是<code>React.render()</code>的启动文件。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  entry<span class="token punctuation">:</span> <span class="token string">&quot;./path/to/my/entry/file.js&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="出口-output"><a href="#出口-output" aria-hidden="true" class="header-anchor">#</a> 出口(output)</h2> <p>output 属性描述了如何处理归拢在一起的代码(bundled code)，在哪里打包应用程序。一般需要以下两点：</p> <ul><li>filename: 编译文件的文件名(main.js/bundle.js/index.js 等)</li> <li>path：对应一个绝对路径，此路径是你希望一次性打包的目录</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    filename<span class="token punctuation">:</span> <span class="token string">&quot;bundle.js&quot;</span><span class="token punctuation">,</span>
    path<span class="token punctuation">:</span> <span class="token string">&quot;/home/proj/public/assets&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="loader"><a href="#loader" aria-hidden="true" class="header-anchor">#</a> loader</h2> <p>webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。但 webpack 只理解 JavaScript。</p> <p>如果你看过生成的<code>bundle.js</code>代码就会发现，Webpack 将所有的模块打包一起，每个模块添加标记 id，通过这样一个 id 去获取所需模块的代码。
而我们的 loader 的作用，就是把不同的模块和文件转换为这样一个模块，打包进去。</p> <p><strong>loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译，从后往前，最终需要返回 javascript。</strong></p> <p>不同的应用场景需要不同的 loader，这里我简单介绍几个（loader 使用前都需要安装，请自行查找依赖安装）：</p> <ul><li>babel-loader</li></ul> <p><a href="https://babeljs.io/learn-es2015/" target="_blank" rel="noopener noreferrer">官网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>在此，想要了解的也可以参考<a href="http://www.ruanyifeng.com/blog/2016/01/babel.html" target="_blank" rel="noopener noreferrer">Babel 入门教程<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。
<code>babel-loader</code>将 ES6/ES7 语法编译生成 ES5，当然有些特性还是需要<code>babel-polyfill</code>支持的（Babel 默认只转换新的 JavaScript 句法，而不转换新的 API，如 Promise 等全局对象）。</p> <p>而对于 babel-loader 的配置，可以通过<code>options</code>进行，但一般更常使用<code>.babelrc</code>文件进行：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
    <span class="token string">&quot;presets&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 设定转码规则</span>
    <span class="token string">&quot;plugins&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 插件</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>css 相关 loader</p> <ul><li>css-loader: 处理 css 文件中的 url()</li> <li>style-loader: 将 css 插入到页面的 style 标签</li> <li>less-loader: less 转换为 css</li> <li>postcss-loader(autoprefixer-loader): 自动添加兼容前缀(<code>-webkit-</code>、<code>-moz-</code>等)</li></ul></li> <li><p>url-loader/file-loader: 修改文件名，放在输出目录下，并返其对应的 url</p> <ul><li>url-loader 在当文件大小小于限制值时，它可以返回一个 Data Url</li></ul></li> <li><p>html-loader/raw-loader: 把 Html 文件输出成字符串</p> <ul><li>html-loader 默认处理 html 中的<code>&lt;img src=&quot;image.png&quot;&gt;</code>为 require(&quot;./image.png&quot;)，需要在配置中指定 image 文件的加载器</li></ul></li></ul> <h2 id="插件-plugins"><a href="#插件-plugins" aria-hidden="true" class="header-anchor">#</a> 插件(plugins)</h2> <p>loader 仅在每个文件的基础上执行转换，<strong>插件目的在于解决 loader 无法实现的其他事</strong>。
由于 plugin 可以携带参数/选项，需要在 wepback 配置中，向 plugins 属性传入<code>new</code>实例。</p> <h2 id="解析-resolve"><a href="#解析-resolve" aria-hidden="true" class="header-anchor">#</a> 解析(resolve)</h2> <p>这些选项能设置模块如何被解析，因为这里会使用到所以也介绍一下用到的：</p> <ul><li><p>resolve.extensions</p> <ul><li>自动解析确定的扩展。默认值为：<code>[&quot;.js&quot;, &quot;.json&quot;]</code></li></ul></li> <li><p>resolve.alias</p> <ul><li>创建<code>import</code>或<code>require</code>的别名，来确保模块引入变得更简单。
<blockquote><p>如果使用 typescript 的话，我们还需要配置<code>tsconfig.json</code>：</p></blockquote></li></ul></li></ul> <h1 id="项目配置"><a href="#项目配置" aria-hidden="true" class="header-anchor">#</a> 项目配置</h1> <h2 id="目录组织"><a href="#目录组织" aria-hidden="true" class="header-anchor">#</a> 目录组织</h2> <div class="language-bash extra-class"><pre class="language-bash"><code>├── build/                      <span class="token comment"># webpack配置参数文件</span>
│   └── <span class="token punctuation">..</span>.
├── src/                        <span class="token comment"># 项目代码入口</span>
│   ├── page1/                  <span class="token comment"># 第一个页面或者应用</span>
│   │   ├── main.js             <span class="token comment"># 页面/应用入口文件</span>
│   │   └── <span class="token punctuation">..</span>.
│   └── page2/                  <span class="token comment"># 第二个页面或者应用</span>
│   │   ├── main.js             <span class="token comment"># 页面/应用入口文件</span>
│   │   └── <span class="token punctuation">..</span>.
│   └── pageN/                  <span class="token comment"># 第N个页面或者应用</span>
│       ├── main.js             <span class="token comment"># 页面/应用入口文件</span>
│       └── <span class="token punctuation">..</span>.
├── .babelrc                    <span class="token comment"># babel编译参数</span>
├── index.html                  <span class="token comment"># 主页模板，所有的页面共用该index.html入口</span>
└── package.json                <span class="token comment"># 项目文件，记载着一些命令和依赖还有简要的项目描述信息</span>
</code></pre></div><h2 id="基本配置文件"><a href="#基本配置文件" aria-hidden="true" class="header-anchor">#</a> 基本配置文件</h2> <p>由于我们需要实现开发时多页面共同启动，打包时分块打包的功能，故在不同环境下我们的入口<code>entry</code>和<code>plugins</code>等将会不一致，这里我们先省略：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  entry<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;dist&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    filename<span class="token punctuation">:</span> <span class="token string">&quot;./[hash].js&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&quot;.js&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.json&quot;</span><span class="token punctuation">]</span> <span class="token comment">// '.ts' and more</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
        loader<span class="token punctuation">:</span> <span class="token string">&quot;babel-loader&quot;</span><span class="token punctuation">,</span>
        include<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src&quot;</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
      <span class="token comment">// more loaders...</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> webpackConfig<span class="token punctuation">;</span>
</code></pre></div><h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>这里我们搭建了最基本的目录结构以及不完整的 webpack 配置，后续我们将深入进行 build 和 dev 的过程。<br>
目前的代码并没有什么太大的作用，后面补上完整项目的代码吧。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/vue/vue-multi-page/1-init-project.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/vue/vue-transition/5-list-and-flip.html" class="prev">
          5. FLIP 与列表过渡
        </a></span> <span class="next"><a href="/front-end-playground/vue/vue-multi-page/2-page-utils.html">
          2. 拿取页面目录名
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-7280" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/98.b4839344.js" defer></script>
  </body>
</html>
